import React, { Fragment } from 'react'
import { StyleSheet, View, Image, Text, ImageBackground } from 'react-native'
import PropTypes from 'prop-types'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { ScaleS, ScaleT, STATUSBAR_HEIGHT } from 'src/utils/ScreenUtil'

export default function LiveHeader (props) {
  const {
    fullscreen,
    showHeader,
    showHeaderPlayBtn,
    channel: { icon, coverImg, startTime, name, signUpNum, watchCount, state } = {},
    company: { simpleName, companyName } = {},
    goBack,
    headerPlayClick,
    style
  } = props
  if (!showHeader) {
    return null
  }
  return (
    <View
      style={[{ backgroundColor: 'rgba(0,0,0,1)', zIndex: 5 }, StyleSheet.absoluteFillObject]}>
      <ImageBackground
        source={{ uri: icon || coverImg }}
        style={styles.flex1}
      >
        <View style={[styles.container]}>
          <View style={[styles.flex1, styles.wrap]}>
            <Text style={styles.time}>{startTime}</Text>
            <Text numberOfLines={2} style={[styles.flex1, styles.content]}>
              {simpleName || companyName} | {name}
            </Text>
            <Text style={styles.want}>{state === 'NOT_START' ? `${signUpNum}人想看…` : `${watchCount}人看过`}</Text>
          </View>
          {showHeaderPlayBtn && <CustomButton style={styles.playBtn} onPress={headerPlayClick}>
            <Image source={require('@/imgC/live/play_yellow.png')}/>
          </CustomButton>}
          {!fullscreen && (
            <CustomButton style={styles.backBtn} onPress={goBack}>
              <Image
                style={styles.backImg}
                source={require('@/imgC/live/btnBack_white.png')}
              />
            </CustomButton>
          )}
        </View>
      </ImageBackground>
    </View>

  )
}

LiveHeader.propTypes = {
  company: PropTypes.object,
  channel: PropTypes.object,
  headerPlayClick: PropTypes.func,
  showHeader: PropTypes.bool,
  showHeaderPlayBtn: PropTypes.bool,
  goBack: PropTypes.func,
  fullscreen: PropTypes.bool
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.35)',
    flexDirection: 'row',
    paddingHorizontal: ScaleS(20),
    paddingVertical: ScaleS(25)
  },
  backBtn: {
    position: 'absolute',
    zIndex: 1000,
    left: 0,
    top: 0,
    height: ScaleS(44),
    width: ScaleS(60),
    justifyContent: 'center',
    alignItems: 'center'
  },
  flex1: {
    flex: 1
  },
  playBtn: {
    alignSelf: 'center'
  },
  wrap: {
    marginTop: ScaleS(45)
  },
  time: {
    fontSize: ScaleT(14),
    fontWeight: '400',
    color: '#FFFFFF',
    lineHeight: ScaleS(20)
  },
  content: {
    marginTop: ScaleS(7),
    fontSize: ScaleT(22),
    fontWeight: '500',
    color: '#FFFFFF',
    lineHeight: ScaleS(30)
  },
  want: {
    fontSize: ScaleT(11),
    fontWeight: '400',
    color: '#FFFFFF',
    lineHeight: ScaleS(26)
  }
})
